<template>
	<uni-row>
		<uni-col :span="12">
			<button class="button-left" @click="edit">
				<uni-icons class="mr-8" type="compose" color="#FFFFFF"></uni-icons>
				编辑票据
			</button>
		</uni-col>
		<uni-col :span="12">
			<button class="button-right" @click="save">
				<uni-icons class="mr-8" type="trash-filled" color="#FFFFFF"></uni-icons>
				保存票据
			</button>
		</uni-col>
	</uni-row>
</template>

<script>
	export default {
		name: "custom-double-button",
		props: {
			save: {
				type: Function,
				default: () => {}
			},
			edit: {
				type: Function,
				default: () => {}
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.button-left {
		height: 44px;
		font-size: 16px;
		color: #FFFFFF;
		line-height: 44px;
		background-color: #0052D9;
		margin-left: 12px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.button-left:after {
		content: "";
		height: 24px;
		width: 100%;
		position: absolute;
		top: 10px;
		left: 0;
		border-left: none;
		border-top: none;
		border-bottom: none;
		border-right: 1px solid #e9eaf780;
		border-radius: 0px;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	.button-right {
		height: 44px;
		font-size: 16px;
		color: #FFFFFF;
		line-height: 44px;
		background-color: #0052D9;
		margin-right: 12px;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	.mr-8 {
		margin-right: 8px;
	}
</style>
